{% extends "index3.html" %}
{% block main_body %}



    <!--今日注册用户数-->
    <div class="grid grid-3">
        <div class="dashboard-widget">
            <div class="title">
                <i class="icon-plus-sign"></i> 今日新增用户数
                <button class="toggle"><i class="icon-chevron-down"></i></button>
                <button class="refresh"><i class="icon-refresh"></i></button>
            </div>
            <div class="content">
                <div class="tile tile-success">
                    <div class="text-overflow"><span class="numeric" id="register_on_today">7,298</span></div>
                </div>
                <div class="content">
                    <div class="progress progress-success progress-stripe active">
                        <div class="bar" style="width: 96%;"><span>96%</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--今日登录用户-->
    <div class="grid grid-3">
        <div class="dashboard-widget">
            <div class="title">
                <i class="icon-user"></i> 今日登录用户
                <button class="toggle"><i class="icon-chevron-down"></i></button>
                <button class="refresh"><i class="icon-refresh"></i></button>
            </div>
            <div class="content">
                <div class="tile tile-info">
                    <div class="text-overflow"><span class="numeric" id="logged_on_today">7,298</span></div>
                </div>
                <div class="content">
                    <div class="progress progress-info progress-stripe active">
                        <div class="bar" style="width: 78%;"><span>78%</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--今日付费用户-->
    <div class="grid grid-3">
        <div class="dashboard-widget">
            <div class="title">
                <i class="icon-user"></i> 今日付费用户
                <button class="toggle"><i class="icon-chevron-down"></i></button>
                <button class="refresh"><i class="icon-refresh"></i></button>
            </div>
            <div class="content">
                <div class="tile tile-error">
                    <div class="text-overflow"><span class="numeric" id="pay_players">6,398</span></div>
                </div>
                <div class="content">
                    <div class="progress progress-error progress-stripe active">
                        <div class="bar" style="width: 56%;"><span>56%</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--今日充值用户-->
    <div class="grid grid-3">
        <div class="dashboard-widget">
            <div class="title">
                <i class="icon-money"></i> 今日充值金额
                <button class="toggle"><i class="icon-chevron-down"></i></button>
                <button class="refresh"><i class="icon-refresh"></i></button>
            </div>
            <div class="content">
                <div class="tile tile-block">
                    <div class="text-overflow"><span class="numeric" id="today_money">7,298</span></div>
                </div>
                <div class="content">
                    <div class="progress progress-block progress-stripe active">
                        <div class="bar" style="width: 66%;"><span>66%</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--用户信息统计-->
    <div class="grid grid-12">
        <div class="dashboard-widget">
            <div class="title">
                <i class="icon-group"></i> 用户信息统计
                <button class="toggle"><i class="icon-chevron-down"></i></button>
                <button class="setting"><i class="icon-cog"></i></button>
                <button class="refresh"><i class="icon-refresh"></i></button>
            </div>
            <div class="content">
                <div class="data-table">
                    <table>
                        <tbody>
                        <tr>
                            <th class="minor"><i class="icon-sort"></i>基础信息：</th>
                            <th class="minor"><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                        </tr>
                        <tr>
                            <td class="minor"><label class="status status-block">今日登录机器数：</label></td>
                            <td class="minor">0</td>
                            <td class=""><label class="status status-block">今日注册机器数：</label></td>
                            <td class="">0</td>
                            <td class=""><label class="status status-error">当前在线用户人数：</label></td>
                            <td class=""><span class="text-dollar">154</span></td>
                        </tr>
                        <tr>
                            <td class="minor"><label class="status status-block">本月注册账户数：</label></td>
                            <td class="minor">56</td>
                            <td class=""><label class="status status-block">本月登录账户数：</label></td>
                            <td class="">99</td>
                            <td class=""><label class="status status-error">本月收益：</label></td>
                            <td class=""><span class="text-error">$2000.00</span></td>
                        </tr>
                        <tr>
                            <td class="minor"><label class="status status-block">本月付费账户数：</label></td>
                            <td class="minor">25</td>
                            <td class=""><label class="status status-block">付费率：</label></td>
                            <td class="">56%</td>
                            <td class=""></td>
                            <td class=""></td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!--当天货币增量-->
    <div class="grid grid-6">
        <div class="dashboard-widget">
            <div class="title">
                <i class="icon-money"></i> 当天金币增量
                <button class="toggle"><i class="icon-chevron-down"></i></button>
                <button class="setting"><i class="icon-cog"></i></button>
                <button class="refresh"><i class="icon-refresh"></i></button>
            </div>
            <div class="content">
                <div class="data-table">
                    <table>
                        <tbody>
                        <tr>
                            <th class="minor"><i class="icon-sort"></i>基础信息：</th>
                            <th class="minor"><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                        </tr>
                        <tr>
                            <td class="minor"><label class="status status-block">当前系统总库存：</label></td>
                            <td class="minor">0</td>
                            <td class=""><label class="status status-block">昨天系统总库存：</label></td>
                            <td class="">0</td>
                            <td class=""><label class="status status-error">货比实际增量：</label></td>
                            <td class=""><span class="text-dollar">154</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--当天砖石增量-->
    <div class="grid grid-6">
        <div class="dashboard-widget">
            <div class="title">
                <i class="icon-money"></i> 当天钻石增量
                <button class="toggle"><i class="icon-chevron-down"></i></button>
                <button class="setting"><i class="icon-cog"></i></button>
                <button class="refresh"><i class="icon-refresh"></i></button>
            </div>
            <div class="content">
                <div class="data-table">
                    <table>
                        <tbody>
                        <tr>
                            <th class="minor"><i class="icon-sort"></i>基础信息：</th>
                            <th class="minor"><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                            <th class=""><i class="icon-sort"></i></th>
                        </tr>
                        <tr>
                            <td class="minor"><label class="status status-block">当前系统总库存：</label></td>
                            <td class="minor">0</td>
                            <td class=""><label class="status status-block">昨天系统总库存：</label></td>
                            <td class="">0</td>
                            <td class=""><label class="status status-error">钻石实际增量：</label></td>
                            <td class=""><span class="text-dollar">154</span></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block extends_js %}
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <script>
        // 异步获取当日基本信息
        $.get("today_info",function(data,status){
            var d = null;
            console.log(data);
            if(status==='success'){
                d = JSON.parse(data);
                $('#register_on_today').html(d.data.register_on_today);
                $("#logged_on_today").html(d.data.logged_on_today);
                $("#pay_players").html(d.data.pay_players);
                $("#today_money").html(d.data.today_money);
            };
        });
    </script>
{% endblock %}
